<template>
  <div class="homePage5">
    <div class="sysId5">
      <div class="title flexcenter">
        <h3>{{ title }}工作台</h3>
      </div>
      <div class="main flex flexdc m-t-20">
        <!-- 头部标签 -->
        <div class="topstate">
          <ul class="flex">
            <li class="li1">
              <h3 class="h3">电梯情况</h3>
              <div class="flex flexjcsa texttc tstate">
                <div class="state flex flexdc">
                  <CountTo class="number co number1" :start-val="0" :end-val="state0.length" :duration="3200" />
                  <span class="span co span1 m-t-15">未绑定</span>
                </div>
                <div class="state flex flexdc">
                  <CountTo class="number co number2" :start-val="0" :end-val="state1.length" :duration="3200" />
                  <span class="span co span2 m-t-15">已录入</span>
                </div>
                <div class="state flex flexdc">
                  <CountTo class="number co number3" :start-val="0" :end-val="state2.length" :duration="3200" />
                  <span class="span co span3 m-t-15">已申请</span>
                </div>
                <div class="state flex flexdc">
                  <CountTo class="number co number4" :start-val="0" :end-val="state3.length" :duration="3200" />
                  <span class="span co span4 m-t-15">已绑定</span>
                </div>
                <!-- <div class="state flex flexdc">
                    <CountTo class="number co number5" :start-val="0" :end-val="state4.length" :duration="3200" />
                    <span class="span co span5 m-t-15">已拒绝</span>
                  </div>
                  <div class="state flex flexdc">
                    <CountTo class="number co number6" :start-val="0" :end-val="state5.length" :duration="3200" />
                    <span class="span co span6 m-t-15">未确认</span>
                  </div> -->
              </div>
            </li>
            <li class="li2">
              <h3 class="h3">维保单位情况</h3>
              <div class="flex units flexjcsa texttc">
                <div class="total flex flexdc">
                  <CountTo class="tnumber number c-p co" :start-val="0" :end-val="records" :duration="3200" />
                  <span class="tcount pu co m-t-15">总备案数</span>
                </div>
                <div class="social flex flexdc">
                  <CountTo class="sunumber number c-p co" :start-val="0" :end-val="reviewed1.length" :duration="3200" />
                  <span class="stitle pu co m-t-15">待复核</span>
                </div>
                <div class="total flex flexdc">
                  <CountTo class="tnumber number c-p co" :start-val="0" :end-val="reviewed2.length" :duration="3200" />
                  <span class="tcount pu co m-t-15">已复核</span>
                </div>
                <div class="social flex flexdc">
                  <CountTo class="sunumber number c-p co" :start-val="0" :end-val="reviewed3.length" :duration="3200" />
                  <span class="stitle pu co m-t-15">已拒绝</span>
                </div>
              </div>
            </li>
            <li class="li3">
              <h3 class="h3">使用单位情况</h3>
              <div class="flex units flexjcsa texttc">
                <div class="total flex flexdc">
                  <CountTo class="tnumber number c-p co" :start-val="0" :end-val="totalUnits" :duration="3200" />
                  <span class="tcount pu co m-t-15">总单位数</span>
                </div>
                <div class="social flex flexdc">
                  <CountTo class="sunumber number c-p co" :start-val="0" :end-val="socialCredit.length" :duration="3200" />
                  <span class="stitle pu co m-t-15">有统一社会信用代码</span>
                </div>
              </div>
            </li>
            <li class="li4">
              <h3 class="h3">应急救援情况</h3>
              <div class="flex units flexjcsa texttc">
                <div class="total flex flexdc">
                  <CountTo class="tnumber number c-p co" :start-val="0" :end-val="faultns" :duration="3200" />
                  <span class="tcount pu co m-t-15">故障</span>
                </div>
                <div class="social flex flexdc">
                  <CountTo class="sunumber number c-p co" :start-val="0" :end-val="polices" :duration="3200" />
                  <span class="stitle pu co m-t-15">报警</span>
                </div>
                <div class="total flex flexdc">
                  <CountTo class="tnumber number c-p co" :start-val="0" :end-val="elivers" :duration="3200" />
                  <span class="tcount pu co m-t-15">待解救</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 内容区 -->
        <div class="content flex">
          <!-- 左侧内容 -->
          <div class="c-left flex flex1 m-r-20">
            <!-- 左侧 -- 左侧内容 -->
            <div class="l-l-l flex flexdc ll m-r-20">
              <div class="dbsx info co-in">
                <h3 class="h3">待办事项</h3>
                <ul>
                  <li v-if="elevatorList.length <= 0" class="empty1">暂无数据</li>
                  <li v-for="(item, i) in elevatorList" :key="i" :class="`dbs${i} flex`">
                    <div class="flex flex1 bordera m-l-10">
                      <span class="l-con">电梯{{ i + 1 }}：</span>
                      <span class="l-con">注册代码：{{ item.registerCode }}</span>
                    </div>
                    <div class="m-l-20 flex">
                      <span v-if="item.bindState === 2" class="bstate" @click="handleRecord">
                        待审核
                      </span>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="yjjy info1 co-in">
                <h3 class="h3">应急救援</h3>
                <ul class="ulo">
                  <li v-if="rescueList.length <= 0" class="empty1">暂无数据</li>
                  <li v-for="(item, i) in rescueList" :key="i" :class="`dbs${i} flex`">
                    <div class="m-l-10 bordera flex1">
                      <span>房间号{{ i + 1 }}：</span>
                      <span>{{ item.roomNumber }}</span>
                    </div>
                    <div class="m-l-20 flex">
                      <span class="bstate" @click="handlePolices(item.roomNumber)">
                        待解救
                      </span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 左侧 -- 右侧内容 -->
            <div class="l-l-r flex flexdc ll">
              <div class="bjsx info co-in">
                <h3 class="h3">办结事项</h3>
                <ul>
                  <li v-if="reviewed1.length <= 0" class="empty1">暂无数据</li>
                  <li v-for="(item, i) in reviewed1" :key="i" :class="`dbs${0} flex`">
                    <div class="flex flex1 bordera m-l-10">
                      <span class="l-con">单位{{ i + 1 }}：</span>
                      <span class="l-con">{{ item.name }}</span>
                    </div>
                    <div class="m-l-20 flex">
                      <span v-if="item.auditState === 0" class="bstate" @click="handleUnitFiling">
                        待审核
                      </span>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="bjxx info1 co-in">
                <h3 class="h3">报警信息</h3>
                <ul>
                  <li v-if="policeList.length <= 0" class="empty1">暂无数据</li>
                  <li v-for="(item, i) in policeList" :key="i" :class="`db${i} flex flex1 borderb m-l-10`" @click="handleToPolice">
                    <span class="bjinfo">报警{{ i + 1 }}：{{ item.address }}</span>
                    <span class="bjinfo m-l-10">{{ item.date }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 图表内容 -->
          <div class="r-echarts">
            <ul class="co-ul eul m-r-20">
              <li id="elevators1" class="m-b-20" />
              <li id="fault" />
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import CountTo from 'vue-count-to'
import echarts from 'echarts'
import { fetchBrandList } from '@/api/elevator/elevatorBrand'
import { useUnitQueryList } from '@/api/elevator/elevatoruseunit'
import { unitfilingQueryList } from '@/api/maintenance/unitfiling'
import { elevatorQueryList } from '@/api/elevator/elevator'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'SysId2',
  components: { CountTo },
  data() {
    return {
      rescueList: [
        {
          id: 1,
          roomNumber: 1234
        },
        {
          id: 2,
          roomNumber: 12345
        },
        {
          id: 3,
          roomNumber: 123456
        },
        {
          id: 4,
          roomNumber: 1234567
        },
        {
          id: 5,
          roomNumber: 12345678
        },
        {
          id: 6,
          roomNumber: 123456789
        },
        {
          id: 7,
          roomNumber: 1234567890
        },
        {
          id: 8,
          roomNumber: 1234567891
        },
        {
          id: 9,
          roomNumber: 1234567892
        },
        {
          id: 10,
          roomNumber: 1234567893
        },
        {
          id: 11,
          roomNumber: 1234567894
        },
        {
          id: 12,
          roomNumber: 1234567895
        }
      ],
      policeList: [
        {
          id: 1,
          address: '【长沙市】黎托路499号绿地之窗7-1Z',
          date: '2020/05/11 13:43'
        },
        {
          id: 2,
          address: '【长沙市】黎托路499号绿地之窗7-1Z',
          date: '2020/06/21 19:23'
        },
        {
          id: 3,
          address: '【长沙市】黎托路499号绿地之窗7-1Z',
          date: '2020/06/27 21:03'
        },
        {
          id: 4,
          address: '【长沙市】黎托路499号绿地之窗7-1Z',
          date: '2020/07/15 10:50'
        },
        {
          id: 5,
          address: '【长沙市】黎托路499号绿地之窗7-1Z',
          date: '2020/07/21 08:22'
        }
      ],
      title: '',
      elevators1: null,
      fault: null,
      faultns: 200,
      polices: 120,
      elivers: 12,
      elevatorList: [],
      totalUnits: 0,
      socialCredit: [],
      records: 0,
      reviewed1: [],
      reviewed2: [],
      reviewed3: [],
      state0: [],
      state1: [],
      state2: [],
      state3: [],
      state4: [],
      state5: [],
      param: {
        bindState: '',
        id: '',
        maintenanceUnitId: '',
        registerCode: '',
        registerUnit: '',
        rescueCode: '',
        useUnitId: '',
        isMaintenancePerson: '',
        name: ''
      },
      newArr1: [],
      paging: {
        pageIndex: 1,
        pageSize: 100
      }
    }
  },
  created() {
    this.systems = JSON.parse(this.$storage.get('systems'))
    this.sId = JSON.parse(this.$storage.get('id'))
  },
  mounted() {
    this.getSysTitle()
    this.getEleList()
    this.getDrawLine()
    this.faults()
    this.getUnitList()
    this.getUnitFillList()
  },
  methods: {
    getSysTitle() {
      this.systems.filter(item => {
        if (item.id === this.sId) {
          this.title = item.name
          return this.title
        }
      })
    },
    handleRecord() {
      this.$router.push({ path: '/government/safety/recordReview/elevatorRecord' })
    },
    handleUnitFiling() {
      this.$router.push({ path: '/government/safety/recordReview/record' })
    },
    handlePolices(roomNumber) {
      window.open(`https://webrtc.linkpow.cn/room.html?id=${roomNumber}`, '_blank')
      '_blank'
    },
    handleToPolice() {
      this.$router.push({ path: '/government/emergency/rescueCenter/alarmMap' })
    },
    // 电梯情况
    getEleList() {
      elevatorQueryList('', '', '', 1, 100000, '', '', '', '').then(res => {
        // console.log(res)
        if (res.code === '000000') {
          this.elevatorList = res.data.filter(item => {
            if (item.bindState === 2) {
              // console.log(item)
              return item
            }
          })
          this.state0 = res.data.filter(item => {
            if (item.bindState === 0) {
              return item
            }
          })
          this.state1 = res.data.filter(item => {
            if (item.bindState === 1) {
              return item
            }
          })
          this.state2 = res.data.filter(item => {
            if (item.bindState === 2) {
              return item
            }
          })
          this.state3 = res.data.filter(item => {
            if (item.bindState === 3) {
              return item
            }
          })
          this.state4 = res.data.filter(item => {
            if (item.bindState === 4) {
              return item
            }
          })
          this.state5 = res.data.filter(item => {
            if (item.bindState === 5) {
              return item
            }
          })
          // this.name = res.data.map(item => {
          //   const items = item.bindState === 0 ? '未绑定'
          //     : item.bindState === 1 ? '已录入'
          //       : item.bindState === 2 ? '已申请'
          //         : item.bindState === 3 ? '已绑定'
          //           : item.bindState === 4 ? '已拒绝' : '未确认'
          //   return items
          // })
          // console.log(this.name)
          this.data22 = res.data.map(item => {
            const id = item.bindState === 0 ? this.state0.length
              : item.bindState === 1 ? this.state1.length
                : item.bindState === 2 ? this.state2.length
                  : item.bindState === 3 ? this.state3.length
                    : item.bindState === 4 ? this.state4.length : this.state5.length

            const name = item.bindState === 0 ? '未绑定'
              : item.bindState === 1 ? '已录入'
                : item.bindState === 2 ? '已申请'
                  : item.bindState === 3 ? '已绑定'
                    : item.bindState === 4 ? '已拒绝' : '未确认'

            const params = {
              value: id,
              name: name
            }
            return params
          })

          // 调用
          const newArr = this.unique(this.data22)
          // console.log(newArr)
          this.elevators = echarts.init(document.getElementById('elevators'))
          this.elevators.setOption({
            title: { text: '电梯备案比例', top: 10, left: 10 },
            tooltip: {},
            legend: {
              orient: 'vertical',
              right: 10,
              top: 30,
              data: newArr
            },
            color: ['green', 'mediumslateblue', 'pink', 'orange', 'darkgoldenrod', 'blue', 'indigo', 'purple', 'salmon', 'mediumorchid'],
            series: [
              {
                name: '访问来源',
                type: 'pie',
                top: 30,
                left: -100,
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                // label: {
                //   show: false,
                //   position: 'center'
                // },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                },
                // labelLine: {
                //   show: false
                // },
                data: newArr
              }
            ]
          })
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    },
    // 使用单位
    getUnitList() {
      useUnitQueryList(this.param.id, this.param.name, this.paging.pageIndex, this.paging.pageSize).then(res => {
        if (res.code === '000000') {
          // console.log(res)
          this.totalUnits = res.pager.totalSize
          this.socialCredit = res.data.filter(item => {
            if (item.socialCreditCode !== '') {
              return item
            }
          })
        }
      })
    },
    // 维保单位
    getUnitFillList() {
      unitfilingQueryList(this.param.id, this.param.name, '', this.paging.pageIndex, this.paging.pageSize).then(res => {
        // console.log(res)
        if (res.code === '000000') {
          this.records = res.pager.totalSize
          this.reviewed1 = res.data.filter(item => {
            if (item.auditState === 0) {
              return item
            }
          })
          this.reviewed2 = res.data.filter(item => {
            if (item.auditState === 1) {
              return item
            }
          })
          this.reviewed3 = res.data.filter(item => {
            if (item.auditState === 2) {
              return item
            }
          })
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    },
    // 电梯品牌统计 / 电梯情况 图表
    getDrawLine() {
      fetchBrandList(
        this.param.id,
        this.param.name,
        this.paging.pageIndex,
        this.paging.pageSize
      ).then(res => {
        // console.log(res)
        if (res.code === '000000') {
          this.datas = res.data.map(item => item.name)

          for (var i = 0; i < this.datas.length; i++) {
            if (this.datas.indexOf(this.datas[i]) === i) {
              var num = 1
              for (var j = i + 1; j < this.datas.length; j++) {
                if (this.datas[i] === this.datas[j]) {
                  num++
                }
              }
              this.newArr1.push(
                {
                  value: num,
                  name: this.datas[i]
                }
              )
            }
          }
          // console.log(this.newArr1)
          this.elevators1 = echarts.init(document.getElementById('elevators1'))
          this.elevators1.setOption({
            title: { text: '电梯品牌统计', top: 10, left: 10 },
            tooltip: {},
            legend: {
              orient: 'vertical',
              right: 10,
              top: 30,
              data: this.newArr1
            },
            color: ['green', 'mediumslateblue', 'pink', 'orange', 'darkgoldenrod', 'blue', 'indigo', 'purple', 'salmon', 'mediumorchid'],
            series: [
              {
                name: '访问来源',
                type: 'pie',
                top: 30,
                left: -100,
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                // label: {
                //   show: false,
                //   position: 'center'
                // },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                },
                // labelLine: {
                //   show: false
                // },
                data: this.newArr1
              }
            ]
          })
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    },
    // 故障信息图表
    faults() {
      this.fault = echarts.init(document.getElementById('fault'))
      this.fault.setOption({
        title: { text: '故障信息', top: 10, left: 10 },
        tooltip: {},
        legend: {
          orient: 'vertical',
          right: 10,
          top: 30,
          data: ['开门故障', '关门故障', '电梯平层长时间开门', '轿厢在开轴区域外停止', '困人故障', '电源故障', '变频器故障', '屏幕一键报警故障', '控制系统故障']
        },
        color: ['green', 'mediumslateblue', 'pink', 'orange', 'darkgoldenrod', 'blue', 'indigo', 'purple', 'salmon', 'mediumorchid'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            top: 30,
            left: -100,
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            // label: {
            //   show: false,
            //   position: 'center'
            // },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            // labelLine: {
            //   show: false
            // },
            data: [
              {
                value: 4,
                name: '开门故障'
              },
              {
                value: 3,
                name: '关门故障'
              },
              {
                value: 6,
                name: '电梯平层长时间开门'
              },
              {
                value: 12,
                name: '轿厢在开轴区域外停止'
              },
              {
                value: 14,
                name: '困人故障'
              },
              {
                value: 24,
                name: '电源故障'
              },
              {
                value: 34,
                name: '变频器故障'
              },
              {
                value: 41,
                name: '屏幕一键报警故障'
              },
              {
                value: 44,
                name: '控制系统故障'
              }
            ]
          }
        ]
      })
    },
    unique(arr) {
      return [...new Set(arr.map(e => JSON.stringify(e)))].map(e => JSON.parse(e))
    }
  }
}
</script>

<style lang="scss">
.homePage5 {
  width: 100%;
  height: 100%;
  .sysId5 {
    .ulo {
      overflow: auto;
    }
    .title {
      h3 {
        font-size: 30px;
        margin: 15px 0;
      }
    }
    .main {
      width: 100%;
      height: 100%;
      .h3 {
        margin: 15px 0 30px 10px;
      }
      .topstate {
        margin-left: 20px;
        ul {
          width: 100%;
          height: 100%;
          li {
            width: 100%;
            height: 160px;
            border-radius: 5px;
            margin-right: 20px;
            h3, .co {
              color: #ffffff;
              font-weight: 700;
            }
            .number {
              font-size: 40px;
            }
          }
          .li1 {
            background: url('~@/assets/platform/1_03.png') no-repeat;
            background-size: 100% 100%;
          }
          .li2 {
            background: url('~@/assets/platform/1_15.png') no-repeat;
            background-size: 100% 100%;
          }
          .li3 {
            background: url('~@/assets/platform/1_08.png') no-repeat;
            background-size: 100% 100%;
          }
          .li4 {
            background: url('~@/assets/platform/1_13.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .content {
        margin: 20px 0 0 20px;
        .c-left {
          flex: 1;
          .l-l-l {
            width: 50%;
            height: 100%;
          }
          .l-l-r {
            flex: 1;
            height: 100%;
          }
          .bjxx {
            ul {
              li {
                .bjinfo {
                  font-size: 14px;
                }
              }
            }
          }
          .empty1 {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #aaaaaa;
            margin-top: 50px;
            height: 100px;
          }
          .dbs0 {
            .bordera {
              border-top: 1px solid #eeeeee;
            }
          }
          .db0 {
            border-top: 1px solid #eeeeee;
          }
          .ll {
            .info, .info1 {
              width: 100%;
              height: 50%;
              // border: 1px solid #eeeeee;
            }
            h3 {
              margin-bottom: 10px;
            }
            .co-in {
              height: 260px;
              padding-bottom: 16px;
              h3 {
                height: 20px;
              }
              ul {
                flex: 1;
              }
            }
            .dbsx {}
            .borderb {
              cursor: pointer;
              border-bottom: 1px solid #eeeeee;
            }
            ul {
              li {
                height: 36px;
                align-items: center;
                .l-con, .bstate {
                  line-height: 30px;
                }
                .bordera {
                  height: 36px;
                  line-height: 36px;
                  border-bottom: 1px solid #eeeeee;
                }
                .bstate {
                  display: inline-block;
                  width: 70px;
                  height: 30px;
                  cursor: pointer;
                  text-align: center;
                  background: cornflowerblue;
                  border-radius: 5px;
                  // border: 1px solid #eeeeee;
                }
              }
            }

            .info {}
            .info1 {}
            ul {
              width: 100%;
              height: 100%;
              li {

              }
            }
          }
        }
        .r-echarts {
          width: 38%;
          height: 100%;
          ul {
            li {
              height: 260px;
              border-radius: 5px;
              // border: 1px solid #eeeeee;
            }
            #elevators {
              margin: 0 0 20px 0;
            }
          }
        }
      }
    }
  }
}
</style>
